<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>基本信息</title>
    <link rel="stylesheet" type="text/css" href="../css/bltools.css">
    <script>
    // use rem as default page size unit .
    var rem, doc = document,
        elm = doc.documentElement;
    rem = 20 / 750 * elm.clientWidth;
    elm.style.fontSize = rem + 'px';
    window.addEventListener('resize', function() {
        rem = 20 / 750 * elm.clientWidth;
        elm.style.fontSize = rem + 'px';
    });
    </script>
</head>

<body>
    <section class="warp" id="white">
        <div class="topnav f_topnav" id="nav">
            <ul>
                <li class="active li-2" val='0'>
                    <a href="javascript:scroll(0,0);">母亲信息</a>
                </li>
                <li val='1' class="li-2">
                    <a href="javascript:scroll(0,0);">父亲信息</a>
                </li>
            </ul>
        </div>
        <div class="content  f_info_4" id="app_main">
            <div class="tab infotab contentactive">
                <form action="" name="mother" id="mother">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">母亲姓名</div>
                                <div class="li-content">
                                    <input type="text" name="m_name">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">年龄</div>
                                <div class="li-content">
                                    <input type="text" name="m_age" pattern="[0-9]*" maxlength="2">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">职业</div>
                                <div class="li-content">
                                    <input type="text" name="m_work">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">民族</div>
                                <div class="li-content">
                                    <input type="text" name="m_nation">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">身份证</div>
                                <div class="li-content">
                                    <input type="tel" name="m_idcard" maxlength="18">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">户口所在地</div>
                                <div class="li-content">
                                    <input type="text" name="m_account">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">工作单位</div>
                                <div class="li-content">
                                    <input type="text" name="m_danwei">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">家庭住址</div>
                                <div class="li-content">
                                    <input type="text" name="m_adress">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">联系电话</div>
                                <div class="li-content">
                                    <input type="tel" name="m_phone" maxlength="11">
                                </div>
                            </a>
                        </li>
                        <li>
                            <div class="li-hint">
                                <span>
                                <i>*</i>您填写的信息仅用于记录您的个人健康档案，不会用于其他用途，请放心填写
                            </span>
                            </div>
                            <div class="save-btn" id="nextbtn">
                                下一步
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
            <div class="tab infotab">
                <form action="" name="father" id="father">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">父亲姓名</div>
                                <div class="li-content">
                                    <input type="text" name="f_name">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">年龄</div>
                                <div class="li-content">
                                    <input type="text" name="f_age" pattern="[0-9]*" maxlength="2">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">职业</div>
                                <div class="li-content">
                                    <input type="text" name="f_work">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">民族</div>
                                <div class="li-content">
                                    <input type="text" name="f_nation">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">身份证</div>
                                <div class="li-content">
                                    <input type="number" name="f_idcard" maxlength="18">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">工作单位</div>
                                <div class="li-content">
                                    <input type="text" name="f_danwei">
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="li-title">联系电话</div>
                                <div class="li-content">
                                    <input type="tel" name="f_phone" maxlength="11">
                                </div>
                            </a>
                        </li>
                        <li>
                            <div class="li-hint">
                                <span>
                                <i>*</i>您填写的信息仅用于记录您的个人健康档案，不会用于其他用途，请放心填写
                            </span>
                            </div>
                            <div class="save-btn" id="tijiao">
                                完成
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </section>
</body>
<script src="../script/require.js " data-main="../script/lib/main"></script>
<script>
app_init = function() {
    require(['warnbox'], function() {
        dataAjax(0)
        var nextbtn = $('#nextbtn'),
            sumbit = $('#tijiao'),
            index = 0,
            topnav = $(".topnav ul li");
        // 点击进入父亲信息
        nextbtn.click(function() {
            index++
            switchNav(index)
        });
        // 点击提交
        sumbit.click(function() {
            dataAjax(1);
        });
        // 头部菜单切换
        topnav.click(function() {
            index = $(this).attr("val");
            switchNav(index)
        })

        function switchNav(index) {
            // 头部菜单切换
            topnav.eq(index).addClass('active').siblings().removeClass("active");
            // 内容页切换
            $('.infotab').eq(index).addClass('contentactive').siblings().removeClass("contentactive");
        }


        function dataAjax(type) {
            var content;
            content = "正在查询..."
            if (type == 1) {
                content = "正在提交..."
                var motherdata = $('#mother').serialize(),
                    fatherdata = $('#father').serialize();
                type = 1;
            }
            laodingBox(true, content)
            var type = type
            var ajaxurl = api.pageParam.serverurl,
                ustr = api.pageParam.userstr,
                opstr = 'yq_jbxx',
                dostr = 'apijksc',
                strData = '&op=' + opstr + '&do=' + dostr;
            var inputbox = $api.domAll("input");
            var motherdata,
                fatherdata;
            var loadzz = $('.loadzz');
            api.ajax({
                url: ajaxurl + strData,
                method: 'post',
                timeout: 7,
                data: {
                    values: {
                        ustr: ustr,
                        motherdata: motherdata,
                        fatherdata: fatherdata,
                        type: type
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if (ret.data.type == "new") {
                        loadboxhiden(loadzz);
                    } else if (ret.data.type == 0) {
                        for (var i = 0; i < inputbox.length; i++) {
                            var inputname = $(inputbox).eq(i).attr('name');
                            var inputval = ret.data.res[0][inputname]
                            $(inputbox).eq(i).attr('value', inputval);
                        }
                        loadboxhiden(loadzz)
                    } else if (ret.data.type == 1) {
                        if (ret.message == "add" && ret.status == 200) {
                            loadboxhiden(loadzz)
                            topwarnboxshow("添加成功", true)
                        } else if (ret.message == "update" && ret.status == 200) {
                            loadboxhiden(loadzz)
                            topwarnboxshow("修改成功", true)
                        } else if (ret.status == 201) {
                            loadboxhiden(loadzz)
                            topwarnboxshow("提交成功", true)
                        }
                    }
                } else {
                    loadboxhiden(loadzz);
                    topwarnboxshow(err.msg, false);
                }
            });
        }
    })
}
</script>
<script src="../script/require.js "></script>
<script src="../script/lib/main.js"></script>
</html>